<template>
  <div class="statistics-page">
    <a-card :bordered="false">
      <!-- 表格顶部搜索部分 -->
      <c-table-search-form
        v-model="tableSearchForm"
        :datas="tableSearchFormData"
        @onChangeDataPicker="onChangeDataPicker"
      >
      </c-table-search-form>

      <!-- 内容部分 -->
      <section class="statistics-content">
        <a-row>
          <a-col
            v-for="(item, index) in basicData"
            :key="index"
            :span="4"
            :xs="2"
            :sm="3"
            :md="3"
            :lg="3"
            :xl="3"
          >
            <div class="flex-between content-item">
              <div class="left">
                <p><Icon :type="item.icon" :iconStyle="iconStyle" /></p>
              </div>
              <div class="right text-align-center">
                <p class="title">{{ item.title }}</p>
                <span class="colorMain font15">{{ item.count }}</span>
              </div>
            </div>
          </a-col>
        </a-row>
      </section>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";

export default {
  name: "Statistics",
  components: {},
  data() {
    return {
      iconStyle: {
        fontSize: "30px",
        color: "#758cff"
      },
      tableSearchForm: {
        timestampArr: []
      },
      tableSearchFormData: [
        {
          prop: "date",
          type: "date-picker"
        }
      ],
      basicData: [
        {
          title: "APP访问次数",
          count: "80",
          icon: "zk-back-mobile"
        },
        {
          title: "WEB访问次数",
          count: "660",
          icon: "zk-back-web"
        },
        {
          title: "APP访问IP",
          count: "878",
          icon: "zk-back-mobile"
        },
        {
          title: "WEB访问IP",
          count: "332",
          icon: "zk-back-web"
        }
      ],
      paginationDatas: {
        pageSizeOptions: ["10", "20", "30", "40", "50","200","1000"],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  created() {
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onPageOnlod() {
      this.loading = true;
      getUserList({
        timestampArr: this.tableSearchForm.timestampArr,
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          this.tableData = res.data.pageData;
          this.paginationDatas.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onChangeDataPicker(val) {
      this.onPageOnlod();
    }
  }
};
</script>

<style lang="less" scoped>
.statistics-content {
  .product-item {
    display: flex;
    align-items: center;
  }
  .content-item {
    width: 88%;
    padding: 10px 20px;
    margin-bottom: 30px;
    box-shadow: 0 3px 8px #d3ddeb;
    &:hover {
      box-shadow: 0 3px 8px #d3ddeb;
      border-color: transparent;
    }
  }
  .title {
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 15px;
  }
  .count {
    text-align: center;
  }
  .icon {
    color: #bec7fa;
    font-size: 30px;
  }
  ::v-deep .ant-card-body {
    padding: 15px;
  }
}
</style>
